<template>
    <div>
        <div class="mui-card" v-for="(item,i) in goodslist" :key="i">
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-item">
                    <!-- swiper -->
                    <mt-switch v-model="selectedObj[item.id]" @change="changeSelect(item.id,selectedObj[item.id])" ></mt-switch>
                    <!-- 图片 -->
                    <img :src="item.thumb_path" alt="">
                    <div class="info">
                        <h1 class="title">{{item.title}}</h1>
                        <p>
                            <span class="price">{{item.sell_price}}</span>
                            <!-- countObj[item.id]表示这条商品的对应数量 -->
                                <nobox :init="countObj[item.id]" :id="item.id"></nobox>
                            <span class="del" @click="del(item.id)">删除</span>
                            <!-- {{countObj[item.id]}} -->
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 结算 -->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner buy">
                        <div class="result">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品<span style="color:red">{{selectedCount}}</span>件，总价<span style="color:red">${{amount}}</span>元</p>
                        </div>
                        <mt-button type="danger" size="small">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
import nobox from '../sub-components/shopcar_numbox.vue'
import {mapGetters,mapMutations} from 'vuex'
// import store from '../../store'
export default {
    data() {
        return{
            goodslist:[], // 商品列表
        }
    },
    created() {
        this.getGoodsList()
    },
    methods:{
        ...mapMutations(["delFromCart","changeSelectState"]),
        async getGoodsList(){
            if (this.idstr.length <= 0) return;
            const {data} = await this.$http.get("/api/goods/getshopcarlist/" + this.idstr)
            console.log(data);
            if(data.status === 0)
            return (this.goodslist = data.message)
        },
        del(id){
             // 删除商品
            // console.log(id);
            // 从界面上删除数据
            this.goodslist.some((item, i) => {
                if (item.id == id) {
                this.goodslist.splice(i, 1);
                return true;
                }
            });
            // 从 vuex 中删除数据
            this.delFromCart(id);
        },
        changeSelect(id,select){
            console.log(id + "------" + select);
            this.changeSelectState({ id, selected: select })
            console.log("ok");
        }
    },
    components: {
        nobox
    },
    computed: {
        ...mapGetters([
            'countObj',
            'idstr',
            'selectedObj',
            'selectedCount',
            'amount'
        ])
    //     idstr () {
    //         return this.$store.getters.idstr
    //     },
    //      countObj (goodslist) {
    //         return this.$store.getters.countObj
    //     },
    //      selectedObj (goodslist) {
    //         return this.$store.getters.selectedObj
    //     },
    //     selectedCount () {
    //         return this.$store.getters.selectedCount
    //     },
    //      amount () {
    //         return this.$store.getters.amount
    //     }
     }
}
</script>

<style lang="scss" scoped>
  .goods-item{
      display: flex;
      img{
          padding-left: 5px;
          width: 60px;
          height: 60px;
      }
      .info{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 5px;
          .title{
          color: black;
          }
          p{
              display: flex;
              justify-content: space-between;
              padding-top: 5px;
              font-size: 16px;
              .price{
                  color: red;
                  font-weight: bold;
                  margin-top: 4px;
              }
              .del{
                  color: #26a2ff;
                  margin-top: 4px;
              }
          }
      }
   }
   .buy{
       display: flex;
       justify-content: space-between;
   }
</style>